<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <link rel="stylesheet" href="./CSS/css/reset.css">
    <style>
        /* 设置nav的大小 */
        .nav{
            width: 1210px;
            height: 48px;
            background-color: #e8E7E3;
            margin: 100px auto;
        }
        /* 设置nav中的li */
        .nav li{
            /* 设置li向左浮动,已使彩蛋横向排列 */
            float:left;
            /* height: 48px; 使其垂直居中!*/
            line-height: 48px;
        }
        /* 设置a的样式 */
        .nav a{
            /* 去除超链接样式 */
            text-decoration: none;
            /* 字体颜色 */
            color: #777;
            /* 字体大小*/
            font-size: 18px;
            /* 设置内边框大小.以让文字填满ul框 */
            padding: 0 43px;

        }
        /* 当鼠标移动到li上时,自动变色 */
        .nav li:hover{
            background-color: #3F3F3F;
            color: #e8E7E3;

        }
        /* 调整最后一个a的内边框的大小,以让整个导航框,在点击时,不留空! */
        .nav li:last-child a{
            padding: 0px 48px 0px 47px;
        }
</style>
</head>
<body>
        <!-- 创建导航条的结构 -->
        <ul class="nav">
            <li id="h">
                <a href="">HTML/CSS</a>
            </li>
            <li id="b">
                <a href="">Browser Side</a>
            </li>
        
            <li id="s">
                <a href="">Server Side </a>
            </li>
        
            <li id="p">
                <a href="">Programming</a>
            </li>
            <li id="x">
                <a href="">XML</a>
            </li>
            <li id="w">
                <a href="">Web Building</a>
            </li>
            <li id="r">
                <a href="">Reference</a>
            </li>
        </ul>
    </body>
</html>